<div class="posts-details-wrap">
  <nz-card style="width:800px;" [nzBodyStyle]="{'padding': '16px'}">
    <div class="pagination-hd">
      <button nz-button nzType="link" [nzLoading]="preLoading" [disabled]="!detailedData.frontId" (click)="turnPages(detailedData.frontId, 0)">上一个</button>
      <button nz-button nzType="link" [nzLoading]="nextLoading" [disabled]="!detailedData.afterId" (click)="turnPages(detailedData.afterId, 1)">下一个</button>
    </div>
  </nz-card>

  <nz-card class="details-content" style="width:800px;">
    <!-- head START -->
    <div class="detail-hd">
      <p class="detail-hd-title">{{ detailedData.title || '--标题--' }}</p>
      <div class="detail-hd-opts">
        <dl>
          <dt>
            <img nz-image width="42px" height="42px" nzSrc="{{ detailedData?.userImg }}" [nzFallback]="fallback" alt="" />
          </dt>
          <dd>
            <span>{{ detailedData.userName || '---' }}</span>
            <span class="span-time">{{ detailedData.commentTime }}</span>
          </dd>
        </dl>

        <div class="hd-state" *ngIf="detailedData.issueStatus != 0">
          <label style="min-width: 120px;">问题状态：</label>
          <nz-select style="width: 138px;" nzSize="small" nzPlaceHolder="请选择..." [(ngModel)]="issueStatusSelected" (ngModelChange)="statusChange($event)">
            <nz-option nzLabel="问题待处理" [nzValue]="1"></nz-option>
            <nz-option nzLabel="问题已解决" [nzValue]="2"></nz-option>
            <nz-option nzLabel="问题跟进中" [nzValue]="3"></nz-option>
            <nz-option nzLabel="问题已记录" [nzValue]="4"></nz-option>
            <nz-option nzLabel="无效问题" [nzValue]="5"></nz-option>
          </nz-select>
        </div>
      </div>
    </div>
    <!-- head END -->

    <!-- 帖子内容 START -->
    <div class="rich-wrap" [innerHTML]="detailedData.content || ''"></div>
    
    <div class="handle-wrap">
      <button *ngIf="detailedData.status != 2" nz-button nzType="text" nz-popover [nzPopoverContent]="contentTemplate" nzPopoverPlacement="left" nzPopoverTrigger="click">
        <i nz-icon nzType="ellipsis" nzTheme="outline"></i>
      </button>
      <ng-template #contentTemplate>
        <button nz-button nzType="text" nzSize="small" nzDanger (click)="offShelfPost()">下架</button>
      </ng-template>
      <button nz-button nzType="text" class="view-defult-btn">
        <i nz-icon nzType="like" nzTheme="outline"></i>{{ detailedData.praiseNum }}
      </button>
      <button nz-button nzType="text" class="view-defult-btn">
        <i nz-icon nzType="message" nzTheme="outline"></i>{{ detailedData.commentNum }}
      </button>
    </div>
    <!-- 帖子内容 END -->

    <!-- 评论框 START -->
    <div class="release-wrap" *ngIf="detailedData.status == 1">
      <p class="release-title">说说我的看法：</p>
      <div class="textarea-box">
        <nz-textarea-count [nzMaxCharacterCount]="500">
          <textarea nz-input maxlength="500" [nzAutosize]="{ minRows: 3, maxRows: 6 }" [(ngModel)]="commentContent" placeholder="请输入..."></textarea>
        </nz-textarea-count>
      </div>
      <div class="sub-labels">
        <nz-space>
          <nz-select *nzSpaceItem style="width: 140px; text-align: left;" nzPlaceHolder="请选择关联账号" [(ngModel)]="relationSelected">
            <nz-option
              *ngFor="let item of relationOptions"
              [nzValue]="item.userId"
              [nzLabel]="item.userId"
              nzCustomContent>
              {{ item.userId }}（{{ item.identity | identityStatus }}）
            </nz-option>
          </nz-select>
          <button *nzSpaceItem nz-button nzType="primary" [disabled]="!commentContent.length" [nzLoading]="commentLoading" (click)="commentSub()">
            <i nz-icon nzType="comment" nzTheme="outline"></i>评论
          </button>
        </nz-space>
      </div>
    </div>
    <!-- 评论框 END -->

    <!-- 评论List START -->
    <div class="comment-lists">
      <div class="comment-lists-hd">
        <span class="lists-hd-lf">全部评论({{ commentParams.total || 0 }})</span>
        <ul class="lists-hd-rt" *ngIf="commentList.length > 0">
          <li
            *ngFor="let item of commentTabs; let index = index;"
            [ngClass]="{active: sortActive == index}"
            (click)="sortChange(index)">
            {{ item.text }}
          </li>
        </ul>
      </div>

      <nz-spin [nzSpinning]="isCommentSpinning">
        <div class="empty-box">
          <nz-empty *ngIf="commentList.length <= 0"></nz-empty>
        </div>
        <ul class="comment-lists-ul">
          <li *ngFor="let item of commentList; let index = index;">
            <p class="lists-ul-avatar">
              <img nz-image width="42px" height="42px" [nzSrc]="item.userImg" [nzFallback]="fallback" alt="" />
            </p>
            <dl class="lists-dl">
              <dt>{{ item.nickname || '---' }}:</dt>
              <dd class="lists-dl-cont">{{ item.content }}</dd>
              <dd class="lists-dl-hf" *ngIf="item.replyContent">
                <span class="name">{{ item.replyNickname || '---' }}：</span>{{ item.replyContent }}
              </dd>
              <dd class="lists-dl-bt">
                <span class="time">{{ item.createTime }}</span>
                <p>
                  <a class="del-btn" nz-button nzType="text" nz-popconfirm nzPopconfirmTitle="是否要删除该评论内容?" [nzIcon]="iconTpl" (nzOnConfirm)="delComment(item)">删除</a>
                  <ng-template #iconTpl>
                    <i nz-icon nzType="question-circle-o" style="color: red;"></i>
                  </ng-template>
                  <button nz-button nzType="text" class="del-btn view-defult-btn">
                    <i nz-icon nzType="like" nzTheme="outline"></i>{{ item.praiseNum || 0 }}
                  </button>
                  <button
                    class="del-btn"
                    nz-button
                    nzType="text"
                    (click)="commentChange(item, index)">
                    {{ item.isComment ? '取消回复' : '回复' }}
                  </button>
                </p>
              </dd>
              <!-- 评论回复 -->
              <dd *ngIf="item.isComment">
                <div class="reply-wrap">
                  <nz-textarea-count style="position: relative;" [nzMaxCharacterCount]="500">
                    <textarea class="reply-textarea" [nzAutosize]="{ minRows: 3, maxRows: 5 }" maxlength="500" placeholder="请输入..." nz-input [(ngModel)]="commentParams.content"></textarea>
                  </nz-textarea-count>
                  <div class="reply-btns">
                    <nz-space>
                      <nz-select *nzSpaceItem style="width: 138px;" nzSize="small" nzShowSearch nzAllowClear nzPlaceHolder="请选择关联账号" [(ngModel)]="commentParams.userId">
                        <nz-option
                          *ngFor="let item of relationOptions"
                          [nzValue]="item.userId"
                          [nzLabel]="item.userId"
                          nzCustomContent>
                          {{ item.userId }}（{{ item.identity | identityStatus }}）
                        </nz-option>
                      </nz-select>
                      <button *nzSpaceItem nz-button nzType="primary" nzSize="small" nzShape="round" [nzLoading]="replyLoading" [disabled]="commentParams.content.length == 0" (click)="replySub(item)">发 送</button>
                    </nz-space>
                  </div>
                </div>
              </dd>
            </dl>
          </li>
        </ul>
      </nz-spin>

      <!-- list handle -->
      <div class="clist-more" *ngIf="commentList.length > 0">
        <button *ngIf="commentList.length != commentParams.total" nz-button nzType="primary" nzSize="small" (click)="loadMore()">- 加载更多 -</button>
        <nz-divider *ngIf="commentList.length == commentParams.total" class="no-more" nzText="没有更多了"></nz-divider>
      </div>
    </div>
    <!-- 评论List EDN -->
  </nz-card>
</div>